<template>
  <el-card class="head-tool">
    <el-row type="flex" justify="space-between">
      <!-- 前 -->
      <div v-if="$slots.qian" class="qian-box">
        <i class="el-icon-info"></i>
        <slot name="qian" />
      </div>
      <!-- 后 -->
      <div class="hou-box">
        <slot name="hou" />
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {
  mounted () {
    // 获得所有插槽
    // 通过$slots能获得所以外界传进来的插槽
    // console.log(this.$slots);
  }
}
</script>

<style lang="scss" scoped>
.head-tool {
  margin: 20px 15px;
  .qian-box {
    display: flex;
    justify-self: unset;
    line-height: 38px;
    border-radius: 3px;
    border: 1px solid #91d5ff;
    background: #e6f7ff;

    i {
      line-height: 38px;
      color: #409eff;
      margin-right: 5px;
    }
  }

  .hou-box {
    // 用剩余的宽度，如果只有它，那它就是铺满（100%）
    // 如果还有别的，就是剩余的所有宽度
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
